<template>
   <div>
      <el-tabs v-model="activeName" @tab-change="handleClick">
        <el-tab-pane :label="item.name" :name="item.key" v-for="(item,index) in tabbars" :key="index"></el-tab-pane>
      </el-tabs>

      <div class="pugtablebox">
        <div class="mb-3 flex justify-between">
          <div>
              <el-button size="small" @click="handleAdd" type="success" :icon="CirclePlus">新增</el-button>
              <el-button size="small" type="danger" :icon="Delete">批量删除</el-button>
          </div>
          <div>
            <el-select v-model="statusValue" class="m-2" placeholder="请选择分类" size="small">
                <el-option
                  v-for="item in [{value:'0',label:'未发布'},{value:'1',label:'发布'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            <el-input
              v-model="keyword"
              class="w-50 m-2"
              size="small"
              placeholder="请输入搜索关键词"
              :suffix-icon="Search"
            /> <el-button size="small" type="success" :icon="Search">搜索</el-button>
          </div> 
        </div>

        <el-table :data="tableData" style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="商品">
              <template #default="scope">
                  <div class="flex flex-row">
                    <div style="width:50px;"><el-image :src="scope.row.img" fit="cover" :lazy="true"></el-image></div>
                    <div class="flex flex-col ml-2">
                      <span class="ml-3">{{ scope.row.name}}</span>
                      <span class="ml-3">￥125.52 | ￥8874</span>
                      <span class="ml-3">分类：手机数码</span>
                      <span class="ml-3 text-xs text-gray-400">创建时间：{{ scope.row.date}}</span>
                    </div>
                  </div>
              </template> 
          </el-table-column>
          <el-table-column prop="num" width="100" label="实际销量"  />
          <el-table-column prop="num" width="100" label="商品状态"  v-if="activeName!='delete'">
            <template #default="{row}">
              <el-tag :type="row.status==1?'danger':'success'">
                {{row.status==1?"上架":"下架"}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" width="100" label="审核状态"  v-if="activeName!='delete'">
            <template #default="{row}">
              <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change=""></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="num" width="180" label="库存数" />
          <el-table-column label="时间" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column label="操作"  width="340">
            <template #default="scope">
               <div v-if="activeName!='delete'">
                <el-button type="primary" :icon="Edit" size="small" @click="">修改</el-button>
                <el-button type="success" :icon="Share" size="small" @click="">详情</el-button>
                <el-button type="danger"  :icon="Delete" size="small" @click="">删除</el-button>
                <el-button type="warning" :icon="Upload " size="small" @click="">轮播图</el-button>
               </div>
               <span v-else>
                  <el-button type="success" :icon="Share" size="small" @click="">恢复数据</el-button>
               </span>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination class="justify-center mt-5" background layout="prev, pager, next" :total="1000" />
      </div>
   </div>
   
   <pug-drawer ref="productAddRef" title="新增产品" @submit="handleSubmit">
    <el-form :model="product" ref="productFormRef" :rules="rules" label-width="80px" :inline="false" size="normal">
      <el-form-item label="产品标题" prop="title">
        <el-input v-model="product.title" placeholder="产品标题"></el-input>
      </el-form-item>
      <el-form-item label="产品封面" prop="content">
        <pug-choose-image v-model="product.cover"/>
      </el-form-item>
      <el-form-item label="商品分类" prop="method">
        <el-select v-model="product.method"  placeholder="请求方式">
          <el-option v-for="item in ['GET','POST','PUT','DELETE']"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品排序" prop="sort">
        <el-input-number v-model="product.sort" :min="1" :max="1000" :step="1" ></el-input-number>
      </el-form-item>
      <el-form-item label="商品状态" prop="status">
        <el-switch v-model="product.status" :active-value="1" :inactive-value="0">
        </el-switch>
      </el-form-item> 
      <el-form-item label="商品价格" prop="title">
        <el-input v-model="product.title" placeholder="商品价格">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品真实价格" prop="title">
        <el-input v-model="product.title" placeholder="商品真实价格">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品上下架" prop="title">
        <el-radio-group v-model="product.ispublish">
          <el-radio  key="1" label="上架"></el-radio>
          <el-radio  key="0" label="下架"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="产品描述" prop="title">
        <el-input v-model="product.title" placeholder="产品描述"></el-input>
      </el-form-item>
      <div>
        <pug-editor v-model="product.content"></pug-editor>
      </div>
    </el-form>
  </pug-drawer>

</template>
<script  setup>
import { ref,reactive } from 'vue'
import { CirclePlus,Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
const keyword = ref("");
const activeName = ref('tab1')
const handleClick = (tab, event) => {
  activeName.value =tab;
}



const statusValue = ref("");
const tableData = [
  {
    id:1,
    date: '2016-05-03',
    name: 'Tom',
    num:1,
    status:1,
    img:"http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/60bf2abe4605b.jpg",
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:2,
    date: '2016-05-02',
    name: 'Tom',
    num:1,
    status:1,
    img:"http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/60bf2abe4605b.jpg",
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:3,
    date: '2016-05-04',
    name: 'Tom',
    num:1,
    status:0,
    img:"http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/60bf2abe4605b.jpg",
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:4,
    date: '2016-05-01',
    name: 'Tom',
    num:1,
    status:0,
    img:"http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/60bf2abe4605b.jpg",
    address: 'No. 189, Grove St, Los Angeles',
  },
]

// 分类导航
const tabbars = [{
  key:"all",
  name:"全部"
},{
  key:"checking",
  name:"审核中"
},{
  key:"saling",
  name:"出售中"
},{
  key:"off",
  name:"已下架"
},{
  key:"min_stock",
  name:"库存预警"
},{
  key:"delete",
  name:"回收站"
}]

// 批量处理
const handleSelectionChange = (item)=>{
   var batachIds = item.map(o=>o.id);
   console.log("你要删除的ID是 : " , batachIds)
}


// 添加商品
const productAddRef = ref(null);
const productFormRef = ref(null);
const rules = {
  title: [{
    required: true,
    message: '产品标题不能为空',
    trigger: 'blur'
  }],
  content: [{
    required: true,
    message: '产品内容不能为空',
    trigger: 'blur'
  }]
};
const product = reactive({
  title: "",
  content: ""
})

const handleAdd = () => {
  productAddRef.value.open();
}

const handleSubmit = () => {
  productFormRef.value.validate((valid) => {
    if (!valid) {
      return;
    }
    productAddRef.value.showLoading();
    alert("保存数据" + JSON.stringify(product))
  })
}  
</script>

<style>
  .pugtablebox{background:#fff;padding: 30px;}
</style>